<script lang="ts" setup>
  import Button from '@sscd/button';
  import Menu from '@sscd/menu';
  import Dropdown from '@sscd/dropdown';
  import type { DropdownProps } from '@sscd/dropdown';
  const placements = [
    'bottomLeft',
    'bottom',
    'bottomRight',
    'topLeft',
    'top',
    'topRight',
  ] as DropdownProps['placement'][];
</script>

<template>
  <div class="demo">
    <div class="demo-title">弹出位置</div>
    <div class="demo-content">
      <template v-for="(placement, index) in placements" :key="placement">
        <Dropdown :placement="placement">
          <Button>{{ placement }}</Button>
          <template #overlay>
            <Menu>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                  1st menu item
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                  2nd menu item
                </a>
              </Menu.Item>
              <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                  3rd menu item
                </a>
              </Menu.Item>
            </Menu>
          </template>
        </Dropdown>
        <br v-if="index === 2" />
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .demo {
    .ant-btn {
      margin-right: 8px;
      margin-bottom: 8px;
    }
    .demo-content {
      margin-top: 100px;
    }
  }
</style>
